<template>
  <Page class="ComponentDemoPage" title="组件示例">
    <view class="DemoPage">
      <Card title="卡片" disabledFold=""> 我的右侧收缩箭头被隐藏了 </Card>
      <Card title="字体图标-FontIcon">
        <FontIcon char="e609" size="20px" />
      </Card>

      <Card title="图标 + 文字-IconLabel">
        <IconLabel :image="$assets.logo" label="王老师好" /><br />
        <IconLabel
          :image="$assets.logo"
          label="我是圆形图标"
          circleIcon
          :style="{ color: 'red' }"
        /><br />
        <IconLabel
          :image="$assets.logo"
          label="图标在右侧"
          reverse
          circleIcon
          :style="{ color: 'red' }"
        /><br />
        <IconLabel
          :image="$assets.logo"
          label="我的图标自定义尺寸"
          iconWidth="100px"
          iconHeight="80px"
        /><br />
        <IconLabel
          image="e609"
          useFont
          label="我是字体图标"
          iconWidth="30px"
          :style="{ color: 'red' }"
          :iconStyle="{ color: 'green' }"
        /><br />
        <IconLabel
          image="e609"
          class="IconUseClass"
          useFont
          label="设置了class, 大号字体"
          iconWidth="30px"
        /><br />
      </Card>

      <Card title="列表菜单-GridMenu">
        <GridMenu :dataSource="menuList" />
        <GridMenu :dataSource="menuList" :columnCount="7" />
        <br />

        <view>设置图标尺寸</view>
        <br />
        <GridMenu
          :dataSource="menuList"
          :iconStyle="{ width: '25px', height: '10px' }"
        />
      </Card>

      <Card title="无限加载">
        <button @click="btnLoadingMoreClickHandler">点我查看</button>
      </Card>

      <Card title="左侧滑出-Drawer">
        <button @click="btnDrawerClickHandler">显示drawer</button>
        <Drawer :visible="visibleDrawer" :direction="drawerDirection.left">
          <view style="color: red">
            drawer内容
            <button @click="btnDrawerInnerClickHandler">点我关闭</button>
          </view>
        </Drawer>
      </Card>
    </view>
  </Page>
</template>
<script lang="ts">
import Assets from '@/Assets';
import Card from '@/components/Card.vue';
import Drawer from '@/components/Drawer.vue';
import DrawerDirection from '@/components/DrawerDirection';
import FontIcon from '@/components/FontIcon.vue';
import GridMenu, { IMenuItem } from '@/components/GridMenu.vue';
import IconLabel from '@/components/IconLabel.vue';
import Page from '@/components/page/Page.vue';
import Vue from '@/utils/Vue';

interface IData {
  menuList: IMenuItem[];
  visibleDrawer: boolean;
  drawerDirection: typeof DrawerDirection;
}

export default Vue.extend({
  data(): IData {
    return {
      visibleDrawer: false,
      drawerDirection: DrawerDirection,
      menuList: new Array(9).fill(0).map((_, index) => {
        return {
          key: index,
          label: `菜单${index}`,
          image: Assets.logo,
        };
      }),
    };
  },
  components: { Page, FontIcon, Card, GridMenu, Drawer, IconLabel },
  props: {},
  methods: {
    btnLoadingMoreClickHandler() {
      uni.navigateTo({
        url: `/pages/demo/LoadingMorePage?key=xyz`,
      });
    },

    btnDrawerClickHandler() {
      this.visibleDrawer = true;
    },

    btnDrawerInnerClickHandler() {
      this.visibleDrawer = false;
    },
  },
});
</script>
<style lang="less" scoped>
.DemoPage {
  padding: 10px;
  > * {
    margin-bottom: 10px;
  }
}
.ComponentDemoPage {
  .IconUseClass {
    font-size: 20px;
  }
}
</style>
